<template>
	<div class="goods" id="goods" name="goods">
		<!-- 面包屑 -->
		<div class="breadcrumb">
			<el-breadcrumb separator-class="el-icon-arrow-right">
				<el-breadcrumb-item to="/cart">首页</el-breadcrumb-item>
				<el-breadcrumb-item>全部商品</el-breadcrumb-item>
				<el-breadcrumb-item v-if="search">搜索</el-breadcrumb-item>
				<el-breadcrumb-item v-else>分类</el-breadcrumb-item>
				<el-breadcrumb-item v-if="search">{{search}}</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<!-- 面包屑END -->

		<!-- 分类标签 -->
		<div class="nav">
			<div class="product-nav">
				  <el-select
				    v-model="value"
				    multiple
				    filterable
				    remote
				    reserve-keyword
				    placeholder="搜索作者"
				    :remote-method="getAuthorList"
				    :loading="loading"
						@change="selectChange">
				    <el-option
				      v-for="item in authorList"
				      :key="item.id"
				      :label="item.name"
				      :value="item.name">
				    </el-option>
				  </el-select>
					
				<span style="margin-left: 10px;"> 最低价 </span>
				<el-input-number v-model="formInline.minPrice" controls-position="right" :min="1" @change="selectChange"></el-input-number>

				<span style="margin-left: 10px;"> 最高价 </span>
				<el-input-number v-model="formInline.maxPrice" controls-position="right" :min="1" @change="selectChange"></el-input-number>

				<el-input placeholder="搜一搜" @keyup.enter.native="goSearch" prefix-icon="el-icon-search" v-model="search" style="width: 200px;margin-left: 10px;">
				</el-input>
				
			</div>
		</div>
		<div class="main">
			<div class="list">
				<!-- 内容 -->
				<MyList :list="productList" v-if="productList.length>0"></MyList>
				<div v-else class="order-empty">
					<div class="empty">
						<h2>抱歉没有找到相关的商品，请看看其他的商品</h2>
					</div>
				</div>
			</div>
		</div>
	</div>

</template>

<script>
	import productApi from '@/api/product.js'
	import authorApi from '@/api/author.js'
	export default {
		name: "Search",
		components: {
			productApi
		},
		data() {
			return {
				value: [],
				search: '',
				loading: false,
				authorList: null,

				formInline: {
					name: null,
					minPrice: null,
					MaxPrice: null
				},

				min: 1,
				max: 2,

				search_text: '',
				productList: [],
			}
		},
		activated() {
			this.getProductList()
			this.getAuthorList()
		},
		methods: {
			// 获取作者列表【page 1,limit 5】
			getAuthorList(query) {
				this.loading = true
				if(query!=''){
					authorApi.getAuthorByName(query).then(res => {
						this.authorList = res.data
						this.loading = false
					})
				}
			},
			//获取商品数据列表
			getProductList() {
				productApi.ShowProductList().then(data => {
					this.productList = data.items;
				});
			},
			selectChange() {
				var that = this
				console.log(that.formInline);
				var complexQuery = {}
				Object.keys(that.formInline).forEach(function(key) {
					if (that.formInline[key] != null && that.formInline[key] != undefined) {
						complexQuery[key] = that.formInline[key]
					}
				})
				if(this.value.length != 0) {
					complexQuery['author'] = this.value[0]
				}
				console.log(complexQuery);
				productApi.complexSearch(complexQuery).then(res=>{
					this.productList = res.items
				})
			},
			goSearch() {
				productApi.goSearch({
					"key":this.search
				}).then(res=>{
					this.productList = res.page.list
				})
			}
		}
	}
</script>

<style scoped>
	.goods {
		background-color: #f5f5f5;
	}

	/* 面包屑CSS */
	.el-tabs--card .el-tabs__header {
		border-bottom: none;
	}

	.goods .breadcrumb {
		height: 50px;
		background-color: white;
	}

	.goods .breadcrumb .el-breadcrumb {
		width: 1225px;
		line-height: 30px;
		font-size: 16px;
		margin: 0 auto;
	}

	/* 面包屑CSS END */

	/* 分类标签CSS */
	.goods .nav {
		background-color: white;
	}

	.goods .nav .product-nav {
		width: 1225px;
		height: 40px;
		line-height: 40px;
		margin: 0 auto;
	}

	.nav .product-nav .title {
		width: 50px;
		font-size: 16px;
		font-weight: 700;
		float: left;
	}

	/* 分类标签CSS END */

	/* 主要内容区CSS */
	.goods .main {
		margin: 0 auto;
		max-width: 1225px;
	}

	.goods .main .list {
		min-height: 650px;
		padding-top: 14.5px;
		margin-left: -13.7px;
		overflow: auto;
	}

	.goods .main .pagination {
		height: 50px;
		text-align: center;
	}

	.goods .main .none-product {
		color: #333;
		margin-left: 13.7px;
	}

	/* 主要内容区CSS END */
	/* 订单为空的时候显示的内容CSS */
	.order .order-empty {
		width: 1225px;
		margin: 0 auto;
	}
	
	.order .order-empty .empty {
		height: 300px;
		padding: 0 0 130px 558px;
		margin: 65px 0 0;
		background: url(/assets/imgs/cart-empty.png) no-repeat 124px 0;
		color: #b0b0b0;
		overflow: hidden;
	}
	
	.order .order-empty .empty h2 {
		margin: 70px 0 15px;
		font-size: 36px;
	}
	
	.order .order-empty .empty p {
		margin: 0 0 20px;
		font-size: 20px;
	}
	/* 订单为空的时候显示的内容CSS END */
</style>
